<template>
    <div id="SoundEqEdit">
        <div class="SoundEq1">
            <div class="SoundEq1Title">气囊组件</div>
            <a-table :columns="columns" :data-source="data" :pagination="false">
                <span slot="tags" slot-scope="text, record">
                    <a-input/>
                </span>
                <span slot="address" slot-scope="text, record">
                    <a-input />
                </span>
                <span slot="age" slot-scope="text, record">
                    <a-input />
                </span>
            </a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            columns: [
                {
                    dataIndex: "name",
                    key: "name",
                    slots: { title: "customTitle" },
                    scopedSlots: { customRender: "name" },
                },
                {
                    title: "Age",
                    dataIndex: "age",
                    key: "age",
                    scopedSlots: { customRender: "age" },
                },
                {
                    title: "Address",
                    dataIndex: "address",
                    key: "address",
                    scopedSlots: { customRender: "address" },
                },
                {
                    title: "Tags",
                    key: "tags",
                    dataIndex: "tags",
                    scopedSlots: { customRender: "tags" },
                },
            ],
            data: [
                {
                    key: "1",
                    name: "John Brown",
                    age: 32,
                    address: "New York No. 1 Lake Park",
                    tags: ["nice", "developer"],
                },
                {
                    key: "2",
                    name: "Jim Green",
                    age: 42,
                    address: "London No. 1 Lake Park",
                    tags: ["loser"],
                },
                {
                    key: "3",
                    name: "Joe Black",
                    age: 32,
                    address: "Sidney No. 1 Lake Park",
                    tags: ["cool", "teacher"],
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
#SoundEqEdit {
    display: flex;
    justify-content: space-around;

    .SoundEq1 {
        width: 970px;
        height: 740px;
        margin-top: 10px;
        position: relative;
        background-image: url("~@/assets/img/SoundEq1.png");
        background-size: contain;
        /* 背景图缩放以完整显示 */
        background-repeat: no-repeat;
        /* 防止背景图重复 */
        background-position: center;

        /* 将背景图居中显示 */
        .SoundEq1Title {
            position: absolute;
            left: 46%;
            font-size: 22px;
            color: white;
            font-family: "KaiTi", "楷体", serif;
        }
    }
}
</style>
<style lang="scss">
#SoundEqEdit {
    .ant-table-wrapper {
        width: 90%;
        position: absolute;
        top: 5%;
        left: 5%;
    }

    .ant-table-thead {
        th {
            background: #0e344e !important;
            color: white !important;
        }
    }

    .ant-table-body,
    .ant-table-placeholder {
        min-height: 680px;
        /* 设置表格的最小高度 */
        background: #0e344e !important;
        overflow-y: auto !important;
    }

    .ant-table-placeholder {
        height: 300px !important;
        min-height: 300px !important;
        border-bottom: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 8%;
    }
}
</style>